
<template>
    <div>
        
        <div>
            我是视频通话页面
        </div>
        <el-button
        type="primary"
        @click="accept"
        style="width: 100%; margin-bottom: 30px"
            v-if="type == 2"
        >
            接受 
        </el-button>
        <video ref="v1" autoplay playsinline></video>
        <video ref="v2" autoplay playsinline></video>
        <el-button
        type="primary"
        id="login"
        style="width: 100%; margin-bottom: 30px"
        @click.native.prevent="handleLogin"
      >返回首页</el-button>
    </div>
</template>

<script>
"use strict";
import { sendWSPush } from "@/utils/socker/websocker" 
import store from '@/store';
import getters from '@/store/getters';
export default {
    name: 'Call',

    data() {
        return {
            from:undefined,
            type:undefined,
            uid:store.state.user.id,
            v1:undefined,
            v2:undefined,
            myStrea:undefined,
            pc:undefined,
            uOffter:undefined
        };
    },

    mounted() {
        this.from = this.$route.query.from;
        this.type = this.$route.query.type;
        if(this.type == 1){
            //主动发送一个请求视频通话的消息
            sendWSPush({type:"3",uid:this.uid,msg:'发送视频对话消息',to:this.from})
        }
        //判断是否调用摄像头
        store.watch((state,getters) => {
            return state.websocket.type
        },(value) => {
            if(value == 4){
                this.sxt();
                sendWSPush({type:"5",uid:this.uid,msg:'摄像头调取成功',to:this.from})
            };
            if(value == 5){
                if(this.pc == null){
                    this.createPeerConnection();
                }
                this.sxt();
                this.pc.createOffer()
                .then((offer) => {
                    this.pc.setLocalDescription(offer);
                    this.offer = offer;
                    sendWSPush({type:"6",uid:this.uid,msg:"阿萨大厦酒店",to:this.from,offer:offer})
                })
                .then(() => {
                    
                })
            };
            if(value == 6){
                if(this.pc == null){
                    this.createPeerConnection();
                }
                this.pc.setRemoteDescription(new RTCSessionDescription(store.state.websocket.msg))
                    .then(() => {
                         // 远程描述设置成功，接下来创建并设置本地描述
                        return this.pc.createAnswer();
                    })
                    .then(answer => {
                        console.log(answer);
                        return this.pc.setLocalDescription(answer);
                    })
                    .then(() => {
                        // 本地描述设置成功，可以发送answer给对方
                        this.createAnswerAndSendMessage(this.pc.localDescription);
                        
                    })
                    .catch(error => {
                        // 处理错误
                        console.log("出现错误");
                        console.log(error);
                    });
                
            };
            if(value == 7){
                if(this.pc == null){
                    this.createPeerConnection();
                }
                console.log(store.state.websocket.msg);
                this.pc.setRemoteDescription(new RTCSessionDescription(store.state.websocket.msg))
            }
            if(value == 8){
                console.log("我执行了！");
            }
        })
        
    },
    beforeDestroy(){
        store.commit('SET_WEBSOCKET_TYPE',0)
    },

    methods: {
        handleLogin(){
            this.$router.push('/')
        },
        accept(){
            if(this.type == 2){
                sendWSPush({type:"4",uid:this.uid,msg:"接收视频通话",to:this.from})
            }
        },
        //调取摄像头逻辑
        startCamera() {
            if(this.pc == null){
                this.createPeerConnection();
            }
            navigator.mediaDevices.getUserMedia({ audio:true,video: true })
            .then((stream) => {
                this.$refs.v1.srcObject = stream;
                stream.getTracks().forEach(track => {
                    this.pc.addTrack(track,stream)
                })
                
            })
            .catch(error => {
                console.log("Error accessing camera:", error);
            });
        },
        createPeerConnection(){
            this.pc = new RTCPeerConnection(null)
            this.pc.onicecandidate = this.handleCurrenrChange;
            this.pc.onaddstream = this.handleRemoteStreamAdded;
            console.log(this.myStrea);
        },
        handleCurrenrChange(event){
            console.log(event);
            if(event.candidata){
                sendWSPush({type:"8",uid:this.uid,msg:"接收视频通话",to:this.from,offer:event.candidata})
            }
        },
        handleRemoteStreamAdded(event){
            this.$refs.v2.srcObject = this.myStrea;
        },


        createAnswerAndSendMessage(e){
            sendWSPush({type:"7",uid:this.uid,msg:"",to:this.from,offer:e})
        },
        sxt(){
            navigator.mediaDevices.getUserMedia({ audio:true,video: true })
            .then((stream) => {
                this.$refs.v1.srcObject = stream;
                this.myStrea = stream;
                console.log(this.myStrea);
                
            })
            .catch(error => {
                console.log("Error accessing camera:", error);
            });
        }
    },
    watch:{

    }
};
</script>

<style lang="scss" scoped>

</style>